<script lang="ts" setup>
	import { ref, reactive, defineProps } from 'vue'

	const data = {
		message: "这是通过作用域插槽传递的数据",
	};
	const props = defineProps({
		loading: {
			type: Boolean,
			defalut: true,
		},
	})
</script>
<template>
	<view class="container page-container">
		<slot :message="data.message" v-if="loading"></slot>
		<view class="loading flex flex-ai-center flex-js-center" v-else>
			<view class="load">
				<text></text>
				<text></text>
				<text></text>
				<text></text>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	/* 加载 */
	.load {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 60px;
	}

	.load text {
		border: 0;
		margin: 0;
		width: 40%;
		height: 40%;
		position: absolute;
		border-radius: 50%;
		animation: spin 2s ease infinite
	}

	.load :first-child {
		background: #4B98FE;
		animation-delay: -1.5s
	}

	.load :nth-child(2) {
		background: #00D05E;
		animation-delay: -1s
	}

	.load :nth-child(3) {
		background: #FFAC00;
		animation-delay: -0.5s
	}

	.load :last-child {
		background: #FB6A67
	}

	@keyframes spin {

		0%,
		100% {
			transform: translate(0)
		}

		25% {
			transform: translate(160%)
		}

		50% {
			transform: translate(160%, 160%)
		}

		75% {
			transform: translate(0, 160%)
		}
	}
</style>